﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="plugins/bootstrap-table/css/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="css/layui.css" media="all"/>
    <link rel="stylesheet" href="css/global.css" media="all">
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
</head>

<body>
<div class="admin-main">
    <form  class="layui-form layui-form-pane">
        <div class="layui-form-item" style="margin-bottom:0px;">
            <label class="layui-form-label">菜单</label>
            <div class="layui-input-inline">
                <input type="text" onsubmit="" class="layui-input" id="title">
            </div>
            <button type="button" id="btn_query"  class="layui-btn layui-btn">
                <i class="fa fa-search" aria-hidden="true"></i>
                </button>
        </div>
    </form>
    <div  id="toolbar" class="layui-btn-group">
        <button class="layui-btn layui-btn-small" id="btn_add">
            <i class="layui-icon">&#xe654;</i>
        </button>
        <button class="layui-btn layui-btn-small" id="btn_edit">
            <i class="layui-icon">&#xe642;</i>
        </button>
        <button class="layui-btn layui-btn-small" id="btn_del">
            <i class="layui-icon">&#xe640;</i>
        </button>
    </div>
    <table id="menu">

    </table>

</div>

<script type="text/javascript" src="plugins/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="layui.js"></script>
<script>
    layui.config({
        base: 'js/'
    });
    var allMenu = null;
    $.get('/back/menu/all',null,function(data){
        allMenu = data.result;
    }) ;
    layui.use(['form'], function () {
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();
        var layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
                layer = layui.layer, //获取当前窗口的layer对象
                form = layui.form();
//初始化页面上面的按钮事件
        $('#btn_query').on('click',function(){
            var queryData = {};
            queryData['title'] = $("#title").val();
            $('#menu').bootstrapTable('refresh',queryData);
        }) ;
        var addBoxIndex = -1;
        $('#btn_add').on('click',function(){
            if (addBoxIndex !== -1)
                return;
            //本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
            $.get('menu/edit', null, function (form) {
                addBoxIndex = layer.open({
                    type: 1,
                    title: '添加菜单',
                    content: form,
                    btn: ['保存', '取消'],
                    shade: false,
                    offset: ['20px', '20%'],
                    area: ['600px', '400px'],
                    zIndex: 19950924,
                    maxmin: true,
                    yes: function (index) {
                        //触发表单的提交事件
                        $('form.layui-form').find('button[lay-filter=edit]').click();
                    },
                    full: function (elem) {
                        var win = window.top === window.self ? window : parent.window;
                        $(win).on('resize', function () {
                            var $this = $(this);
                            elem.width($this.width()).height($this.height()).css({
                                top: 0,
                                left: 0
                            });
                            elem.children('div.layui-layer-content').height($this.height() - 95);
                        });
                    },
                    success: function (layero, index) {
                        var form = layui.form();
                        form.render();
                        form.on('submit(edit)', function (data) {
                            $.ajax({
                                url: '/back/menu',
                                type: 'post',
                                data: data.field,
                                dataType: "json",
                                success: function () {
                                    layerTips.msg('保存成功');
                                    layerTips.close(index);
                                    location.reload();
                                }

                            });
                            //这里可以写ajax方法提交表单
                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                        });
                        //console.log(layero, index);
                    },
                    end: function () {
                        addBoxIndex = -1;
                    }
                });
            });
        });
        $('#btn_edit').on('click',function(){
            var rows= $('#menu').bootstrapTable('getSelections');
            var id = "";
            if(rows.length==1){
               id = rows[0].id;
            }else{
                layerTips.msg("请选中一行");
                return ;
            }
            $.get('/back/menu/' + id, null, function (data) {
                var result = data.result;
                $.get('menu/edit', null, function (form) {
                    layer.open({
                        type: 1,
                        title: '编辑菜单',
                        content: form,
                        btn: ['保存', '取消'],
                        shade: false,
                        offset: ['20px', '20%'],
                        area: ['600px', '400px'],
                        zIndex: 19950924,
                        maxmin: true,
                        yes: function (index) {
                            //触发表单的提交事件
                            $('form.layui-form').find('button[lay-filter=edit]').click();
                        },
                        full: function (elem) {
                            var win = window.top === window.self ? window : parent.window;
                            $(win).on('resize', function () {
                                var $this = $(this);
                                elem.width($this.width()).height($this.height()).css({
                                    top: 0,
                                    left: 0
                                });
                                elem.children('div.layui-layer-content').height($this.height() - 95);
                            });
                        },
                        success: function (layero, index) {
                            var form = layui.form();
                            form.render();
                            setFromValues(layero, result);
                            layero.find(":input[name='code']").attr("disabled", "");
                            debugger;
                            for(var i=0;i<allMenu.length;i++)
                                layero.find('#parentId').append('<option value="'+allMenu[i].id+'" >'+allMenu[i].title+'</option>');
                            layero.find("select[name='parentId']").val(result['parentId']);
                            form.render('select');
                            form.on('submit(edit)', function (data) {
                                $.ajax({
                                    url: '/back/menu/' + result.id,
                                    type: 'put',
                                    data: data.field,
                                    dataType: "json",
                                    success: function () {
                                        layerTips.msg('更新成功');
                                        layerTips.close(index);
                                        location.reload();
                                    }

                                });
                                //这里可以写ajax方法提交表单
                                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                            });
                        }
                    });
                });
            });
        })  ;
        $('#btn_del').on('click',function(){
            var rows= $('#menu').bootstrapTable('getSelections');
            var id = "";
            if(rows.length==1){
                id = rows[0].id;
            }else{
                layerTips.msg("请选中一行");
                return ;
            }
            layer.confirm('确定删除数据吗？', null, function (index) {
                $.ajax({
                    url: "/back/menu/" + id,
                    type: "DELETE",
                    success: function (data) {
                        console.log(data);
                        if (data.rel == true) {
                            layerTips.msg("移除成功！");
                            location.reload();
                        } else {
                            layerTips.msg("移除失败！")
                            location.reload();
                        }
                    }
                });
                layer.close(index);
            });
        })  ;
    });


    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#menu').bootstrapTable({
                id: "id",// 选取记录返回的值
                code: "id",// 用于设置父子关系
                parentCode: "parentId",// 用于设置父子关系
                rootCodeValue: -1,
                url: '/back/menu/page', //请求后台的URL（*）
                method: 'get', //请求方式（*）
                toolbar: '#toolbar', //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: false, //是否启用排序
                sortOrder: "asc", //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: false,
                showColumns: false, //是否显示所有的列
                showRefresh: true, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: true, //是否启用点击选中行
                height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID", //每一行的唯一标识，一般为主键列
                showToggle: true, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                columns: [{
                    checkbox: true
                }, {
                    field: 'id',
                    title:'ID'
                },{
                    field: 'title',
                    title: '菜单'
                }, {
                    field: 'code',
                    title: '编码'
                },{
                    field: 'href',
                    title: 'url'
                },{
                    field: 'icon',
                    title: '图标'
                },{
                    field: 'description',
                    title: '描述'
                }]
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit, //页面大小
                offset: params.offset, //页码
                title: $("#title").val()
            };
            return temp;
        };
        return oTableInit;
    };


    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};

        oInit.Init = function () {

        };
        return oInit;
    };
    function setFromValues(el, data) {
        for (var p in data) {
            el.find(":input[name='" + p + "']").val(data[p]);
        }
    }
</script>
</body>

</html>